<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
		.top-content{height: 40px;background: #ea4609;width: 110%;margin-left: -3%;}
		.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:3px solid #e94709 ;color: #585858;}
		.mui-bar .mui-btn{position: absolute;top: 0;right: -10px;border: 0;background-color: #e94709;color: #FFFFFF;font-size: 10px;border-radius: 40px;}
		.mui-bar-nav{top: 0;-webkit-box-shadow: 0 1px 6px #fff;box-shadow: 0 1px 6px #fff;}
		.qian-calendar {position: absolute;width: 80%;height: 120%;top: 60%;margin: 0 10%;background-color: #fff;border-radius: 15px;box-shadow: 1px 1px 20px #ededed;}
		.mui-bar-nav~.mui-content{padding-top:20% ;background-color: #FFFFFF;}
		.mui-content .mui-icon{padding: 2px;border-radius: 15px;background-color: #E94709;color: #FFFFFF;font-size: 15px;margin-right: 3px;}
		.qian-day{position: absolute;top: 23%;padding: 0 15%;margin: 0 10%;padding-top: 6%;width:90%;font-size: 10px;color: #fff;line-height: 30px;}
		.qian-day span{float: left;font-size: 10px;}
		.qian-day .qian-tips{color: #FFFFFF;font-size: 10px;}
		.qian-day .qian-tips span{float: unset;}
		.calendar-week{border-top: 2px solid #a4a4a4;width:80%;margin: 0 10%;height:45px;}
		.calendar-week div{float:left;width:14.28%;height:45px;color:#4a4a4a;text-align:center;line-height:45px;cursor:pointer;}
		.calendar-content{width:80%;margin: 0 10%;}
		.calendar-content div{float:left;width:12.28%;height: 29px;padding: 5px;margin:3px 1%;color:#4a4a4a;text-align:center;cursor:pointer;}
		.calendar-content .canChoose{}
		.calendar-content .canChoose:hover{color: #fff;background-color:#09F;border-radius: 20px;}
		.calendar-content div.today{color:#09F;}
		.calendar-content div.qian{color: #ffffff;background-color: #E94709;border-radius: 20px;}
		#calendar-ym{margin: 5% 0;text-align: center;font-size: 20px;font-weight: 500;}
		.tomorrow-tips{position: absolute;bottom: 0;width: 100%;height: 3rem;border-radius: 2px;background-color: #dcdcdc;font-size: 10px;text-align: center;line-height: 50px;color: #595757;border-bottom-right-radius: 10px 10px;border-bottom-left-radius: 10px 10px;}
		.mui-switch .mui-switch-handle{width: 20px;height: 20px;}
		.mui-switch-mini{margin-right: 55px;margin-top: 13px;width: 37px;height: 23px;}
		.mui-switch.mui-active{background-color: #E94709;border-color: #E94709;}
		#qiandao{position: absolute;top: 184%;width: 30%;font-size: 13px;text-align: center;background: #E94709;padding: 1% 0;margin: 0 35%;border-radius: 30px;color: #ffffff;}
		.qian-bottom{position: absolute;bottom: 0;height: 16%;width: 100%;background-color: #ffc46b;}
		.mui-table-view:before, .mui-table-view::after, .mui-table-view-cell:after{height: 0;}
		.qian-bottom .mui-table-view{width: 100%;}
		.qian-bottom .mui-table-view .mui-table-view-cell{width: 30%;padding: 0;margin: 2% 1.5%;float: left;}
		.mui-bar{padding: 0;}
		.mui-table-view .mui-media-object{height: 6.5rem!important;width: 100%;max-width: 10rem;}
		#sumDay {width: 100px;height: 30px;background: url({$aideUrl}app/resource/aitimt/images/qians.png) no-repeat;background-size: 100% 100%;-webkit-background-size: 100% 100%;color: #ffab00;font-size: 25px;letter-spacing:20px;text-indent: 10px;}

    </style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
					<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
					<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
				<!--公共菜单start -->
				{template 'aitimt/common/menu'}
				<!-- 公共菜单end-->
			</div>
		<style>
		* {touch-action: pan-y;}
		body{background-color: #FFFFFF;}
		.mui-bar-nav{position: absolute;background: url({$aideUrl}app/resource/aitimt/images/my-top.png) no-repeat;height:40%;background-size: 100% 100%;-webkit-background-size: 100% 100%;}
		.top-return {position: absolute;width: 10%;top: 10px;left: 10px;}
		</style>
			<span style="font-size: 12px;color: white;">已连续<span id="qian_count" style="color: #E94709;padding: 0 5px;">{$qian_count}</span>天签到</span>
			<div class="qian-day">
				<span>已坚持</span><span id="sumDay">{$sum}</span><span>天签到</span>
				<a type="button" class="mui-btn" onclick="cc()" >签到规则</a>
				<br><p class="qian-tips">连签一周有机会领取<span class="mui-icon iconfont icon-jifen"></span>50积分</p>
			</div>
			<div id="qian-calendar" class="qian-calendar">
					<div id="calendar-ym"></div>
					<div class="calendar-week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>
					<div id="calendar-content" class="calendar-content clearfix"></div>
					<div class="tomorrow-tips">
							不想漏签? 开启明日签到提醒
						<div class="mui-switch mui-switch-mini" style="float: right;">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
			</div>
			<div id="qiandao">
				马上签到
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="qian-bottom">
			<ul class="mui-table-view">
				{loop $recommendlist $key $recommend}
				<li class="mui-table-view-cell mui-media">
					<a href="{php echo app_url('home/index/detail').'&activityid='.$recommend['id']}">
					<img class="mui-media-object mui-pull-left" src="{php echo tomedia($recommend['thumb']);}">
					</a>
				</li>
				{/loop}
			</ul>
		</div>

		<!-- 公共底部start -->

		<!-- 公共底部end -->
		<script type="text/javascript">
            function cc(id) {
                var btnArray = ['我知道了'];
                var msg='1.每日签到可获得日签奖励5积分,连续签到7天可以获得连签额外奖励50积分,同一周期内(每周)最多可领取1次。<br>2.每日最多可签到1次,断签则会重新计算连签天数。<br>3.活动以及奖励最终解释权归爱计时赛事平台所有';
                mui.confirm(msg, '签到规则', btnArray, function(e) {
                });
            }
			var cldbox=document.getElementById("qian-calendar");
			var oym = document.getElementById("calendar-ym");
			var content = document.getElementById("calendar-content");
			var qiandao = document.getElementById("qiandao");

			// 时间对象(默认当前)

			var	dateObj = new Date();

			// 年月获取
			var year = getYear(dateObj);
			var month = getMonth(dateObj);

			// 月年的显示
			oym.innerHTML = year+'/'+month;
			// 获取本月1号的周值
			var fistWeek = getCurmonWeeknum(dateObj);
			// 本月总日数
			var monDaynum = getCurmonDaynum(dateObj);
			// 当前日期
			var nowDay = getDay(dateObj);
			//初始化显示本月信息
			setContent(content, fistWeek, monDaynum, nowDay);

			var isSupportMUI = (typeof mui === 'function');
			var evt = {
				type: isSupportMUI?'tap':'click'
			};
			//签到事件
			qiandao.onclick = function(){
				util.toast('签到成功');
				document.getElementById('today').classList.add("qian");
                $.post("{php echo app_url('home/index/qiandao')}",function(data){
                    if (data.errno==1){
                        document.getElementById('sumDay').innerHTML=data.sum;
                        document.getElementById('qian_count').innerHTML=data.qian_count;
                        if (Number(data.qian_count)==7){
                            var btnArray = ['我知道了'];
                            var msg='恭喜已您获得连签七天奖励50积分!';
                            mui.confirm(msg, '连签奖励', btnArray, function(e) {
                            });
						}
                    }
                },"json");
			};

			// 显示当前时间
			content.addEventListener(evt.type,function (event) {
			    if(event.target.tagName.toLowerCase()=="div" && event.target.nodeType=="1" && hasclass(event.target.className,"canChoose")){
					var day = event.target.innerHTML;
					dateObj = new Date(getYear(dateObj), getMonth(dateObj)-1, day);
					var week = getWeek(dateObj);
				};
			})
			//有无指定类名的判断
			function hasclass(str,cla){
			  	var i=str.search(cla);
			  	if(i==-1){
			   		return false;
			  	}else{
			   		return true;
			  	};
			}

			// 初始化日期显示方法
			function setContent(el, fistWeek, monDaynum, nowDay){
				// 留空
				for(var i=1;i <= fistWeek;i++){
					var subContent = document.createElement("div");
					subContent.innerHTML = "";
					el.appendChild(subContent);
				}
				//签到了的天数数组
				var qianday=eval('{php echo json_encode($qianArr);}');
				function isInArray(arr, str) {
				    if (str<10){str='0'+str;}
				    var testStr = ',' + arr.join(",") + ",";
				    return testStr.indexOf("," + str + ",") != -1 ;
				}
				// 正常区域
				for(var i=1;i <= monDaynum;i++){
					var subContent = document.createElement("div");
					subContent.className="canChoose";
					if(i==nowDay){
						subContent.setAttribute("id","today");
						subContent.classList.add("today");
					}
					if(isInArray(qianday,i)){
						subContent.classList.add("qian");
					}
					if(i<10){
					subContent.innerHTML = '0'+i;
					}else{
					subContent.innerHTML = i;
					}
					el.appendChild(subContent);
				}
			}

			// 清除内容
			function clearContent(el){
				el.innerHTML="";
			}
			// 判断闰年
				function isLeapYear(year){
					if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
						return true;
					}else{
						return false;
					}
				}

				// 得到当前年份
				function getYear(dateObj) {
					return dateObj.getFullYear()
				}

				// 得到当前月份
				function getMonth(dateObj) {
					var month=dateObj.getMonth()
					switch(month) {
						case 0: return "1"; break;
					  	case 1: return "2"; break;
					  	case 2: return "3"; break;
					  	case 3: return "4"; break;
					  	case 4: return "5"; break;
					  	case 5: return "6"; break;
					  	case 6: return "7"; break;
					  	case 7: return "8"; break;
					  	case 8: return "9"; break;
					  	case 9: return "10"; break;
					  	case 10: return "11"; break;
					  	case 11: return "12"; break;
					  	default:
					}
				}

				// 得到当前号数
				function getDay (dateObj) {
					return dateObj.getDate();
				}

				// 得到周期数
				function getWeek (dateObj) {
					var week;
					switch (dateObj.getDay()){
					 	case 1: week = "星期一"; break;
					 	case 2: week = "星期二"; break;
					 	case 3: week = "星期三"; break;
					 	case 4: week = "星期四"; break;
					 	case 5: week = "星期五"; break;
					 	case 6: week = "星期六"; break;
					 	default: week = "星期天";
					}
					return week;
				}

				// 获取本月总日数方法
				//修改后做了判断，如果传入fullyear 和 curMonth 参数，就可以查询任意年份任一月份有多少天，用于处理31号的问题
				function getCurmonDaynum(dateObj,fullyear,curMonth) {
					var year = fullyear?fullyear:dateObj.getFullYear();
					var month = curMonth?curMonth:dateObj.getMonth();
					if(isLeapYear(year)){//闰年
						switch(month) {
							case 0: return "31"; break;
							case 1: return "29"; break; //2月
							case 2: return "31"; break;
						   	case 3: return "30"; break;
						   	case 4: return "31"; break;
						   	case 5: return "30"; break;
						   	case 6: return "31"; break;
						   	case 7: return "31"; break;
						   	case 8: return "30"; break;
						   	case 9: return "31"; break;
						   	case 10: return "30"; break;
						   	case 11: return "31"; break;
							default:
						}
					}else{//平年
				   		switch(month) {
				   			case 0: return "31"; break;
				   			case 1: return "28"; break; //2月
				   			case 2: return "31"; break;
						   	case 3: return "30"; break;
						   	case 4: return "31"; break;
						   	case 5: return "30"; break;
						   	case 6: return "31"; break;
						   	case 7: return "31"; break;
						   	case 8: return "30"; break;
						   	case 9: return "31"; break;
						   	case 10: return "30"; break;
						   	case 11: return "31"; break;
				   			default:
						}
					}
				}

				// 获取本月1号的周值
				function getCurmonWeeknum(dateObj) {
					var oneyear = new Date();
					var year = dateObj.getFullYear();
					var month = dateObj.getMonth(); //0是12月
					oneyear.setFullYear(year);
					//先设置1号，再改变月份，避免31号的问题
					oneyear.setDate(1);
					oneyear.setMonth(month); //0是12月
					return oneyear.getDay();
				}

		</script>

	</body>

</html>
